<template>
  <view class="max_box">
    <canvas class="canvas-img" id="firstCanvas" @longpress="canvasGet" canvas-id="firstCanvas"
      :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas>
    <!-- 图片 -->
    <view class="img_box">
      <image class="img" :src="canvasPath" :show-menu-by-longpress="true" v-if="canvasPath !== '' || flag"></image>
    </view>
    <view class="mark"></view>
  </view>
</template>
<script>
// cancvas 设置文字
import { getImageInfo, drawRowtext, canvasTextAutoLine, } from '@/utils/canvasFn'
export default {
  name: 'PosterCanvas',
  data() {
    return {
      canvasPath: '',
      context: null,
      canvasWidth: 600, //图片宽度
      canvasHeight: 1090, //图片高度
      windowHeight: ''
    }
  },
  props: {
    myCanvasSize: {
      type: Array,
      default: () => {
        return [0.8, 16 / 9] //[0]为画布占屏幕宽度的比例，[1]为背景画布长宽比
      }
    },
    posterInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    // 电话
    phone: {
      type: String,
      default: ''
    },
  },
  mounted() {
    this.init()
    let that = this
    // that.showCanvas()
    wx.getSystemInfo({
      success: function (res) {
        if (res.windowWidth > 415) {
          that.windowWidth = 414
        } else {
          that.windowWidth = res.windowWidth
        }
        if (
          res.model == 'Windows' ||
          res.model == 'iPad' ||
          res.model.slice(0, 4) == 'iPad'
        ) {
          that.windowHeight = 667
        } else if (res.windowHeight > 813) {
          that.windowHeight = 812
        } else if (res.windowHeight < 700) {
          that.windowHeight = 667
        } else {
          that.windowHeight = res.windowHeight
        }
        console.log(' that.windowHeight', that.windowHeight)
      }
    })
  },
  methods: {
    async init() {
      uni.showLoading({
        title: '生成海报中...'
      })
      let ctx = uni.createCanvasContext('firstCanvas', this)
      let {
        price,
        prepaid,
        textHead,
        imageBody,
        titleRank,
        imageHead,
        comAddress,
      } = this.posterInfo

      ctx.setFillStyle('white')
      ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight)
      // 海报
      console.log('imageHead', imageHead)
      let imgHead = await getImageInfo(imageHead)
      ctx.drawImage(imgHead.path, 0, 0, this.canvasWidth, 720)

      // 二维码
      let imgBody = await getImageInfo(imageBody)
      ctx.drawImage(imgBody.path, 410, 820, 160, 160)
      // 大标题
      canvasTextAutoLine(
        ctx,
        textHead, //内容
        30, //大小
        'left', //对齐
        'middle', //setTextBaseline
        'normal bold 26px Microsoft JhengHei', //样式
        '#222', //颜色
        30, // x轴
        760, // y轴
        540, // 文字显示最大宽度
        36 // 文字行高
      )
      if (prepaid > 0) {
        canvasTextAutoLine(
          ctx,
          `（预付订金￥${prepaid}）`, //公司名
          24, //大小
          'left', //对齐
          'middle', //setTextBaseline
          'normal bold 24px Microsoft JhengHei',
          // 'normal 600 24px Microsoft JhengHei', //样式
          '#f34c54', //颜色
          30, // x轴
          900, // y轴
          540, // 文字显示最大宽度
          36 // 文字行高
        )
      }
      canvasTextAutoLine(
        ctx,
        '￥', //公司名
        24, //大小
        'left', //对齐
        'middle', //setTextBaseline
        'normal bold 24px Microsoft JhengHei', //样式
        '#de4141', //颜色
        30, // x轴
        860, // y轴
        540, // 文字显示最大宽度
        36 // 文字行高
      )
      // 价格
      canvasTextAutoLine(
        ctx,
        price, //
        55, //大小
        'left', //对齐
        'middle', //setTextBaseline
        'normal bold 24px Microsoft JhengHei', //样式
        '#de4141', //颜色
        60, // x轴
        850, // y轴
        540, // 文字显示最大宽度
        60 // 文字行高
      )
      // 公司名
      canvasTextAutoLine(
        ctx,
        titleRank, //公司名
        24, //大小
        'left', //对齐
        'middle', //setTextBaseline
        'normal bold 24px Microsoft JhengHei', //样式
        '#777', //颜色
        30, // x轴
        940, // y轴
        540, // 文字显示最大宽度
        36 // 文字行高
      )
      // 公司地址,超出省略号显示
      drawRowtext(
        ctx,
        comAddress, //地址
        30, // x轴
        970, // y轴
      )
      // 小程序
      canvasTextAutoLine(
        ctx,
        '长按识别小程序码立抢优惠', //公司名
        22, //大小
        'center', //对齐
        'middle', //setTextBaseline
        'normal 500 22px Microsoft JhengHei', //样式
        '#666', //颜色
        this.canvasWidth - 120, // x轴
        1000, // y轴
        190, // 文字显示最大宽度
        30 // 文字行高
      )
      // 电话
      canvasTextAutoLine(
        ctx,
        this.phone, //公司名
        24, //大小
        'left', //对齐
        'middle', //setTextBaseline
        'normal 500 24px Microsoft JhengHei', //样式
        '#222', //颜色
        30, // x轴
        1040, // y轴
        540, // 文字显示最大宽度
        36 // 文字行高
      )
      // ctx.draw()
      ctx.draw()
      uni.hideLoading()
      this.canvasGet()
    },
    // 生成临时图片地址
    canvasGet() {
      // var that = this
      uni.canvasToTempFilePath(
        {
          canvasId: 'firstCanvas',
          success: res => {
            // 在H5平台下，tempFilePath 为 base64
            console.log('地址', res.tempFilePath)
            // this.canvasPath = ''
            this.canvasPath = res.tempFilePath
            // console.log('',res.tempFilePath);
          },
          fail: () => {
            console.log('下载失败')
          }
        },
        this
      )
    },
    //保存图片到相册
    saveImage() {
      //获取用户的当前设置。获取相册权限
      uni.getSetting({
        success: res => {
          //如果没有相册权限
          if (!res.authSetting['scope.writePhotosAlbum']) {
            //向用户发起授权请求
            uni.authorize({
              scope: 'scope.writePhotosAlbum',
              success: () => {
                //授权成功后，保存图片到系统相册
                uni.canvasToTempFilePath(
                  {
                    canvasId: 'firstCanvas',
                    quality: 1,
                    fileType: 'jpg',
                    complete: res => {
                      console.log('保存到相册', res)
                      uni.saveImageToPhotosAlbum({
                        filePath: res.tempFilePath,
                        success(res) {
                          // uni.showToast({
                          //   title: '已保存到相册',
                          //   icon: 'success',
                          //   duration: 2000,
                          // })
                          uni.showModal({
                            title: '提示',
                            showCancel: false,
                            content: '图片已保存到相册，快去分享到朋友圈吧',
                            success: function (res) { }
                          })
                        }
                      })
                    }
                  },
                  this
                )
              },
              //授权失败
              fail: () => {
                // uni.hideLoading()
                uni.showModal({
                  title: '您拒绝了获取相册权限。',
                  content: '进入权限管理,授权相册权限,保存图片。',
                  success: res => {
                    if (res.confirm) {
                      //调起客户端小程序设置界面，返回用户设置的操作结果。（重新让用户授权）
                      uni.openSetting({
                        success: res => {
                          console.log(res.authSetting)
                        }
                      })
                    } else if (res.cancel) {
                      return uni.showToast({
                        title: '已取消！'
                      })
                    }
                  }
                })
              }
            })
          } else {
            //如果已有相册权限，直接保存图片到系统相册
            uni.canvasToTempFilePath(
              {
                canvasId: 'firstCanvas',
                quality: 1,
                fileType: 'jpg',
                complete: res => {
                  console.log('保存到相册', res)
                  uni.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath,
                    success(res) {
                      uni.showModal({
                        title: '提示',
                        showCancel: false,
                        content: '图片已保存到相册，快去分享到朋友圈吧',
                        success: function (res) { }
                      })
                      // uni.showToast({
                      //   title: '已保存到相册',
                      //   icon: 'success',
                      //   duration: 2000,
                      // })
                    }
                  })
                }
              },
              this
            )
          }
        },
        fail: res => { }
      })
    },

  }
}
</script>

<style lang="scss" scoped>
.canvas-img {
  position: absolute;
  left: -1800rpx;

  // background-color: #fff;
  // z-index: 98;
  // background-color: #999;
  // border: #000 solid 1px;
  // position: fixed;
  // top: -40%;
  // left: 50%;
  // transform: translate(-30%, 0%);
}

.mark {
  width: 100%;
  position: fixed;
  top: 0;
  bottom: 0rpx;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.8);
}

.img_box {
  width: 400rpx;
  height: 726.67rpx;
  background-color: #fff;
  position: fixed;
  top: calc(50vh - 176rpx - 320rpx);
  left: 50%;
  z-index: 111;
  transform: translate(-50%, 0%);

  .img {
    width: 100%;
    height: 100%;
  }
}
</style>
